<template>
  <div id="print">
    <el-input v-model="stockDetail.stockTitle" :disabled="true">
      <template slot="prepend">单据标题</template>
    </el-input>
    <div style="height: 7px"></div>
    <div><span v-html="stockDetail.stockDesc"/></div>

    <el-table id="stockTable" v-loading="loading" :data="stockDetail.sampleBackups" max-height="300" title="关联样本复份">
      <el-table-column align="center" label="关联样本复份编号" min-width="100" prop="sampBackupCode"/>
      <el-table-column align="center" label="样本源名称" prop="sampSourceName"/>
      <el-table-column align="center" label="样本源类型" prop="sampSourceTypeName"/>
      <el-table-column align="center" label="样本类型" prop="sampTypeName"/>
      <el-table-column align="center" label="样本位置" prop="sampLocation" width="600"/>
      <el-table-column align="center" label="条码/二维码" prop="qrCode">
        <template slot-scope="scope">
          <span style="vertical-align: middle">{{ scope.row.qrCode }}</span>
          <vue-qr v-if="scope.row.qrCode" :size="24" :text="scope.row.qrCode"
                  style="margin-left: 3px; vertical-align: middle"
          />
        </template>
      </el-table-column>
    </el-table>

    <div v-if="stockDetail.attaches && stockDetail.attaches.length > 0" style="margin-top: 7px">
      <div v-for="(item, index) in stockDetail.attaches">
        <el-link type="primary" @click="attachView(item)">{{ item.fileName }}</el-link>
      </div>
    </div>
  </div>
</template>

<script>
import { getStock } from '@/api/activiti/stock'
import { getPreviewUrl } from '@/api/oss/minio'
import VueQr from 'vue-qr'

export default {
  name: 'StockDetail',
  components: {
    VueQr
  },
  props: {
    stockId: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      // 单据详情
      stockDetail: {},
      // 遮罩层
      loading: true
    }
  },
  created() {
    this.getStockDetail(this.stockId)
  },
  methods: {
    getStockDetail(stockId) {
      this.loading = true
      getStock(stockId).then(response => {
        this.stockDetail = response.data
        this.loading = false
      })
    },
    // 查看附件
    attachView(value) {
      getPreviewUrl(value.fileUrl).then(response => {
        window.open(response.data)
      })
    },
    // 打印
    print() {
      let code = this.stockDetail.stockId.substring(this.stockDetail.stockId.lastIndexOf('-') + 1)
      let content = '<div><span>单据编号：' + code + '</span><span style=\'padding-left: 30px\'>单据标题：' + this.stockDetail.stockTitle
        + '</span><span style=\'padding-left: 30px\'>创建人：' + this.stockDetail.createName
        + '</span><span style=\'padding-left: 30px\'>提交时间：' + this.stockDetail.createTime + '</span></div>'
        + document.getElementById('stockTable').innerHTML

      let strBodyStyle = '<style>table, table tr, table th, table td { text-align: center; border: 1 solid #000000; border-collapse:collapse } table td { padding: 3px 0 } </style>'
      let strFormHtml = strBodyStyle + '<body>' + content + '</body>'
      this.$lodop.commonPrint(this.stockDetail.stockTitle, strFormHtml, 0, 'A4')
    }
  },
  watch: {
    stockId(newValue, oldValue) {
      this.getStockDetail(newValue)
    }
  }
}
</script>

<style scoped>
.el-input /deep/ .el-input__inner {
  color: #555555 !important;
  cursor: pointer;
}
</style>
